<template>
	<view class="content">
		<list class="list" v-if="list.length">
			<view class="boxItemOne ui-cell" v-for="(item,index) in list" :key="index"  @tap="goDetail(item.id)">
				<image :src="item.avatar" class="userAvatar"></image>
				<view class="text-c">
					<view class="userMsg ui-cell">
						<view class="userName">{{item.name}}</view>
						<view class="soonBtn ui-cell" @tap="goDetail(item.id)">立即预约</view>
					</view>
					<view class="userContent">
						<view class="text">{{item.abstract}}</view>
					</view>
				</view>
			</view>
		</list>
		<view v-show="isLoadMore">
		   <u-loadmore :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				page: 1,
				pagesize: 5,
				list:[
				],
			}
		},
		onShow() {
		  this.list=[];	
		  this.getList();
		},
		//下拉刷新
		onPullDownRefresh() {
		   this.page=1;
		   this.isLoadMore=false;
		   this.list=[];
		   this.getList();
		},
		onReachBottom(){
		   if(!this.isLoadMore){  
				this.isLoadMore=true
				this.page+=1
				this.getList(() => uni.stopPullDownRefresh())
			}
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:'/pages/index/coachDetails?id='+id
				})
			},
			getList(cb){
				uni.showLoading({
					title: '请稍后...',
					mask: true
				})
				this.$request.request({
					url: '/open/coachList',
					method: 'post',
					data: {
						page: this.page,
						pagesize: this.pagesize,
					}
				}).then(res => {
					cb && cb();
					if(res.code==200){
						if(res.data){
						   this.list=this.list.concat(res.data);
						   if(res.data.length<this.pagesize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
								  this.isLoadMore=true                                             
								  this.loadStatus='nomore'
							}else{
								  this.isLoadMore=false
							}
						}else{
							this.isLoadMore=true
							this.loadStatus='nomore'
						}
					}else{  //接口请求失败的处理
						  uni.showToast({title:res.message,icon:'none'})
						  this.isLoadMore=false
						  if(this.page>1){
								this.page-=1
						  }
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
    .content{
		width: 100%;position: relative;background-color: #000000;
		.list{
			width: 100%;height: auto;padding: 198rpx 20rpx 20rpx 20rpx;
			.boxItemOne{
				height: 250rpx;
				background: linear-gradient( 167deg, #EFD09E 0%, #F4DEB9 100%);border-radius: 8rpx;
				justify-content: space-between;
				padding: 0 30rpx;
				margin: 0 20rpx 40rpx 20rpx;
				.userAvatar{
					width: 148rpx;height: 148rpx;border-radius: 100%;margin-right: 20rpx;background-color: #FFFFFF;
				}
				.text-c{
					width: 75%;
					.userMsg{
						justify-content: space-between;
						.userName{
							font-size: 32rpx;color: #000;font-weight: bold;
						}
						.soonBtn{
							width: 176rpx;height: 66rpx;
							justify-content: center;
							background: linear-gradient( 180deg, #403E3F 0%, #353031 100%);
							border-radius: 8rpx;
							justify-content: center;
							font-size: 28rpx;color: #F4DEB9;
						}
					}
					.userContent{
						margin: 20rpx 10rpx 20rpx 0;
						display: flex;
						flex-direction: column;
						min-height: 2em;
						max-width: 500rpx;
						.text{
							font-size: 28rpx;color: #666;
							line-height: 1.5;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
</style>
